<template>
  <div id="orgBusiness_index">
    <div class="title">
      <span class="left">业务类型</span>
      <el-button class="add" type="primary" size="small" icon="el-icon-plus" @click="goLink('/orgBusiness/orgBusinessAdd')">
        添加
      </el-button>
    </div>
    <el-table
      type="index"
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      style="width: 100%;padding: 32px;"
      :default-sort="{prop: 'creatTime', order: 'descending'}"
			@sort-change='sortChange'
    >
      <el-table-column
        prop="number"
        label="序号"
        align="center"
        width="180">
       <template slot-scope="scope">
				 <span>{{scope.$index+(currentPage - 1) * pageSize + 1}} </span>
				</template>
      </el-table-column>
      <el-table-column
        prop="businessName"
        width=""
        align="center"
        label="业务类型"
      >
        <template slot-scope="scope">
          <span style="color: #328EF9;text-decoration:none;cursor: pointer">{{scope.row.businessName}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="creatTime"
        label="更新时间"
        sortable="custom"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="businessDescription"
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <img @click="goLink('/orgBusiness/orgBusinessDetail',scope.row.id)" class="imgGroup" src="../assets/img/yewu_02.png">
          <img @click="goLink('/orgBusiness/orgBusinessEdit',scope.row.id)" class="imgGroup" src="../assets/img/yewu_01.png">
          <img @click="handleDelete(scope.row.id)" class="imgGroup" src="../assets/img/yewu_03.png">
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange" 
				@current-change="handleCurrentChange" 
				:current-page.sync="currentPage"
        :page-size="pageSize" 
				:page-sizes="[1, 2, 3, 4]" 
				layout="prev, pager, next" 
				:total="tableData.length">
      </el-pagination>
    </div>
  </div>
</template>
<script>
	import {orgAllBusiness,orgDelBusiness} from '../api/getData.js'
  export default {
    name: 'orgBusiness_index',
    data: function () {
      return {
        centerDialogVisible: false,
        dataindex:0,
        tableData: [],
				counts:0,
				pageSize:10,
				currentPage:1,
      }
    },
    created: function () {
			// this.getAllList('true')
		}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted() {}, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
		beforeRouteEnter(to, from, next){
			next(vm=>{
					console.log(vm)
					// 每次进入路由执行
					vm.getAllList('true')
			})
		},
    methods: {
			sortChange: function(column, prop, order) {
				console.log(column ,column.prop,column.order)
				if(column.order === 'descending'){
					this.getAllList('true')
				}else if(column.order === 'ascending'){
					this.getAllList('false')
				}
			},
			goLink (url,id) {
				this.$router.push({
					path:url,
					query:{
						id:id
					}
				})
			},
			handleDelete (id) {
				this.$confirm('请再次确认是否删除?','提示',{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(()=>{
					orgDelBusiness({
						id:id
					}).then((res) =>{
						console.log(res.data,"删除业务类型")
						if(res.data.code == 0){
							this.getAllList('true')
							this.$message({
								message:'删除成功',
								type:'success'
							})
						}else{
							this.$message.error(res.data.msg)
						}
					}).catch((error) =>{
						console.log(error)
					})
				}).catch(()=>{
					this.$message({
						type: 'info',
						message: '已取消删除'
					});  
				})
					
			},
			// 获取全部业务类型
			getAllList(order){
				orgAllBusiness({
					order:order
				}).then((res) =>{
					console.log(res.data,"获取机构全部业务类型")
					if(res.data.code == 0){
						this.tableData = res.data.data.bussilists
						this.counts = res.data.data.length
					}else{
						this.tableData = []
					}
				}).catch((error) =>{
					console.log(error)
				})
			},
			handleSizeChange(val){
				this.pageSize = val;
			},
			handleCurrentChange(val) {
				this.currentPage = val
			}
    } // 函数
  }
</script>
<style lang='scss'>
  #orgBusiness_index {
    .title {
      width: 100%;
      height: 56px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin-bottom: 24px;
      padding: 0 20px;
      .left {
        font-size: 16px;
        color: #333437;
        font-weight: bold;
      }
      .add {
        color: #fff;

      }
    }
    .el-table thead tr th {
      background-color: #fafafa;
			color: #333;
    }
    .el-table::before {
      height: 0;
    }
    .imgGroup {
      cursor: pointer;
      margin: 0 10px;
    }
    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 0;
      background-color: #fff;
      .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
        background-color: #fff;
        border: 1px solid #ccc;
      }
      .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #409EFF;
      }
    }

  }
</style>
